<template>
  <!-- <el-drawer title="新增采购申请" placement="right" :visible="show" size="45%" @close="onClose" style="overflow: auto;">
    <el-form :form="form" layout="vertical">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label='申请人'>
            <el-input v-model="form.applicant" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label='采购说明'>
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.content">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-table :data="dataList">
            <el-table-column prop="name" label="物品名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="型号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.type"></el-input>
              </template>
            </el-table-column>

            <el-table-column prop="unit" label="单位">
              <template slot-scope="scope">
                <el-input v-model="scope.row.unit"></el-input>
              </template>
            </el-table-column>

            <el-table-column prop="amount" label="数量">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.amount" :min="1" :step="1" size="small" />
              </template>
            </el-table-column>

            <el-table-column prop="price" label="单价">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.price" :min="1" size="small" />
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="dataAdd" type="primary" ghost size="large" style="margin-top: 10px;width: 100%">
            新增物品
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="drawer-bootom-button">
      <el-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <el-button style="margin-right: .8rem">取消</el-button>
      </el-popconfirm>
      <el-button @click="handleSubmit" type="primary" :loading="loading">提交</el-button>
    </div>
  </el-drawer> -->

  <el-dialog  :close-on-click-modal="false" :visible.sync="show" width="600px" style="overflow: auto;" @close="onClose" title="提示"  >
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="驳回原因" prop="rejectReason">
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.rejectReason">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="sureReject">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { procureSave, purchaseRequestAudit } from '../../../api/base/buyapplay'

const formItemLayout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 24 }
}
export default {
  name: 'RurchaseAdd',
  props: {
    rurchaseAddVisiable: {
      default: false
    },
    rejectId: {
      default: false
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.account.user
    }),
    show: {
      get: function () {
        return this.rurchaseAddVisiable
      },
      set: function () {
      }
    },
  },
  data() {
    return {
      formItemLayout,
      // form: this.$form.createForm(this),
      form: {},
      loading: false,
      dataList: [],
      consumableType: [],
      rules: {
        rejectReason: [
          { required: true, message: '驳回原因不能为空', trigger: 'blur' },
        ],
      }
    }
  },
  mounted() {
  },
  methods: {
    dataAdd() {
      this.dataList.push({ name: '', type: '', typeId: '', unit: '', amount: '', price: '' })
    },
    reset() {
      this.loading = false
    },
    onClose() {
      this.reset()
      this.$emit('close')
    },
   sureReject() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const params = {
            purchaseRequestId: this.rejectId.id,
            auditStatus: '2',
            rejectReason:this.form.rejectReason
          }
          const { data, code, msg } = await purchaseRequestAudit(params)
          if (code === 200) {
            this.$message.success(msg)
            this.$emit('close','1')
          } else {
            this.$message.error(msg)
            this.$emit('close')
          }
        }
      });
    },
    async handleSubmit() {
      if (this.dataList.length !== 0) {
        let price = 0
        this.dataList.forEach(item => {
          price += item.price * item.amount
        })
        try {
          const values = this.form
          values.price = price
          values.goods = this.dataList
          this.loading = true
          const { data, code, msg } = await procureSave(JSON.stringify(values))
          if (code === 200) {
            this.$message.success(msg)
            this.loading = true
            this.$emit('close', '1')
          }
        } catch (error) {
          this.loading = false
        }
      } else {
        this.$message.warning('请添加物品！')
      }
    }
  }
}
</script>

<style scoped>
.el-form {
  margin: 0 30px;
}

.drawer-bootom-button {
  margin: 30px;
  text-align: center;
}
</style>
